<template>
    <div class="hisDetail-container">
        <div class="imgWrapper">
            <img src="http://guijiwenhua.oss-cn-hangzhou.aliyuncs.com/20190416/ea96e15f34394329aaf81523af766250.jpg" width="100%">
        </div>
        <article class="intro-container">
            <section class="intro-wrapper">
                <div class="intro-item" v-for="item,index in hisDetail" :key="index">
                    <van-row>
                        <van-col span="8">
                            <div class="intro-text" style="margin-left: 10px"><i></i><span>{{item.title}}</span>
                            </div>
                        </van-col>
                        <!--style="color: #627e94;"-->
                        <van-col span="16" style="color: #627e94;">
                            <div class="intro-value">
                                {{item.value}}
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </section>
        </article>
    </div>
</template>

<script>
    const DETAIL_INFOS = [
        {key: 'activityName', "title": "活动名称", value: ''},
        {key: 'invitedUserName', "title": "用户昵称", value: ''},
        {key: 'userCreateTime', "title": "注册时间", value: ''},
        {key: 'bindStatusStr', "title": "绑定状态", value: ''},
        {key: 'invitedUserMobile', "title": "手机号码", value: ''},
        {key: 'userWxStatusStr', "title": "关注状态", value: ''}
    ]
    import {escape2Html} from '../../utils/tools'
    export default {
        name: "hisDetail",
        data() {
            return {
                hisDetail: {},
                id:'',
            }
        },
        created() {
            if (null!=this.$route.query.id) {
                this.id = this.$route.query.id;
                this.getDetail();
            }
        },
        computed:{
        },
        mounted() {
            // this.hisDetail = DETAIL_INFOS;
            // let item ={}
            // item.activityName='&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&&&&22277&&&&2777&&&&';
            // this.hisDetail.forEach(elem => {
            //     if(elem.key=='activityName'){
            //         elem.value =item[elem.key]?escape2Html(item[elem.key]):item[elem.key]
            //     }else{
            //         elem.value = item[elem.key]
            //     }
            // })
            //

        },
        methods: {
            getDetail(){
                this.$api.personInf.recommendActivityHisDetail({recordsId: this.id}).then(res => {
                    if (res.code == 0) {
                        let item = res.data;
                        this.hisDetail = DETAIL_INFOS;
                        this.hisDetail.forEach(elem => {
                            if(elem.key=='activityName'){
                                elem.value =item[elem.key]?escape2Html(item[elem.key]):item[elem.key]
                            }else{
                                elem.value = item[elem.key]
                            }
                        })
                    } else {
                        Toast(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        // beforeRouteLeave(to, from, next){
        //     next();
        // }
    }
</script>

<style scoped lang="less">
    @import "../../assets/less/base";

    .hisDetail-container {
        /*padding: 10px 0 60px;*/
        margin: 10px;
        background: #f1f5f8;
        .imgWrapper{
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            background-color: #fff;
            img{
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
            }
        }
        .intro-container{
            padding: 10px 0 60px;
            background: #ffffff;
            height: 100%;
            .intro-wrapper {
                text-align: start;
                .intro-item {
                    height: 20px;
                    margin: 20px 0;
                    /*padding: 2px 0;*/
                    .intro-text {
                        height: 20px;
                        line-height: 20px;
                        /*padding: 2px 0;*/
                        color: @front-font-color;
                        i {
                            vertical-align: top;
                            display: inline-block;
                            height: 20px;
                            line-height: 20px;
                            width: 3px;
                            background: url("/images/weixin2/hbg1.png") no-repeat;
                            /*background-color: @main-theme-color;*/
                            /*border-radius: 20%;*/
                        }
                        span {
                            padding-left: 10px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    .intro-value {
                        /*padding: 2px 0;*/
                        color: @front-font-color;
                        word-wrap: break-word;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                    .intro-value.pb50 {
                        padding-bottom: 50px;
                    }
                }
            }
        }


    }
</style>
